<template>
  <div class="main clearfix">
    <div class="tips-box">
      小结:在押总<span>{{ xjInfo.total }}</span>笔，总金额<span>{{ xjInfo.sum
      }}</span>万元，其中发生代偿未处理客户<span>{{ xjInfo.unprocessedCustomers
      }}</span>个，未处理代偿总金额<span>{{ xjInfo.unprocessedCompensation }}</span>元，有发生保理扣款失败客户<span>{{ xjInfo.failedPeriods
      }}</span>个，保理扣款失败总金额<span>{{ xjInfo.failedAmounts }}</span>元
    </div>
    <!-- 查询 -->
    <section class="section_wrap wrap_te">

      <el-form
        :inline="true"
        style="text-align: left"
        :model="query"
        ref="query"
        class="query clearfix"
      >
        <el-form-item label="产品:" prop="productType">
          <el-select
            v-model="query.productType"
            placeholder="请选择"
            popper-class="selectBox"
          >
            <el-option
              v-for="item in productType"
              :key="item.id"
              :label="item.description"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属人员:" prop="belong">
          <el-input
            placeholder="请输入"
            v-model="query.belong"
          ></el-input>
        </el-form-item>
        <el-form-item label="贷后人员:" prop="loanOfficer">
          <el-input
            placeholder="请输入"
            v-model="query.loanOfficer"
          ></el-input>
        </el-form-item>
        <el-form-item label="抵押物地区:" prop="area">
          <el-input
            placeholder="请输入"
            v-model="query.area"
          ></el-input>
        </el-form-item>
        <el-form-item label="倒计时:" prop="countdownDay">
          <el-select
            v-model="query.countdownDay"
            placeholder="请选择"
          >
            <el-option
              v-for="item in countdownList"
              :key="item.id"
              :label="item.description"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="section-select" label="代偿情况:">
          <el-input
            placeholder="起始次数"
            v-model="query.min"
          ></el-input>
          <span class="lianjie">至</span>
          <el-input
            placeholder="结束次数"
            v-model="query.max"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称:" prop="basicBorrowerName">
          <el-input
            placeholder="请输入"
            v-model="query.basicBorrowerName"
          ></el-input>
        </el-form-item>
        <el-form-item label="催收状态:" prop="collectionStatus">
          <el-select
            v-model="query.collectionStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in collectionTime"
              :key="item.id"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保理扣款失败:" prop="failedPeriod">
          <el-select
            v-model="query.failedPeriod"
            placeholder="请选择"
          >
            <el-option
              v-for="item in failedPeriodTime"
              :key="item.id"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="未跟进时间:" prop="unfollowedDay">
          <el-select
            v-model="query.unfollowedDay"
            placeholder="请选择"
          >
            <el-option
              v-for="item in unfollowedDayTime"
              :key="item.id"
              :label="item.itemText"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常订单:" prop="repayException">
          <el-select
            v-model="query.repayException"
            placeholder="请选择"
          >
            <el-option
              label="异常"
              value="0"
            ></el-option>
            <el-option
              label="正常"
              value="1"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item class="button">
          <span class="tips-text">以上筛选项建议少于3项</span>
          <el-button v-no-more-click type="danger" @click="emptyFun"
          >清空
          </el-button
          >
          <el-button v-no-more-click type="primary" @click="queryFun"
          >搜索
          </el-button
          >
        </el-form-item>
      </el-form>
    </section>
    <section class="section_wrap">
      <el-form>
        <el-row>
          <el-col :xl="24">
            <el-form-item class="btn">
              <!--              <el-button type="primary" @click="orderExport"-->
              <!--              >导出-->
              <!--              </el-button-->
              <!--              >-->
              <el-button @click="batchTransfer" v-if="showCustomerTransfer"
              >贷后人员批量转移
              </el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :data="tableData"
        :inline="true"
        border
        style="width: 100%"
        :row-key="getRowKey"
        ref="multipleTable"
        @selection-change="changeFun"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="36"
          class-name="checkBox"
        ></el-table-column>
        <el-table-column
          prop="orderNumber"
          label="业务单号"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="unfollowedDay"
          label="未跟进 时间（天）"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="basicBorrowerName"
          label="客户名称"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="opinion"
          label="处置意见"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="productName"
          label="产品"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="contractGuaranteeMoney"
          label="审批金额 （万元）"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="contractGuaranteeMonth"
          label="期数"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="area"
          label="抵押物地区"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="pledgeHouseAddress"
          label="抵押物地址"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="loanTime"
          label="放款时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="belong"
          label="归属人员"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="loanOfficer"
          label="贷后人员"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="collectionStatusName"
          label="催收状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="noRepay"
          label="未处理 代偿次数"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="noRepayMoney"
          label="未处理代偿 总金额（元）"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="failedPeriod"
          label="保理扣款 失败期数"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="failedAmount"
          label="保理扣款失败 总金额（元）"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          prop="countdownDay"
          label="倒计时（天）"
          label-class-name="tips"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="repayRemark"
          label="备注"
          :show-overflow-tooltip="true"
        />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="downloadContract(scope.row)"
              style="color: #45b8ef"
            >下载
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click="goView(scope.row)"
              style="color: #45b8ef"
            >查看
            </el-button
            >

          </template>
        </el-table-column>

      </el-table>
      <!--    分页-->
      <div class="pagination">
        <span class="title">小计：共{{ this.total }}条数据</span>
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="total"
          :page-size="query.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </section>

    <!-- 批量转移! -->
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="isTransfer"
      title="转移订单"
      width="30%"
      :before-close="handleClose"
    >
      <Transfer ref="Transfer" :order-numbers="ids" @refresh="getList" @dialogCloes="dialogCloes" />
    </el-dialog>
<!--    下载合同-->
    <el-dialog
      :modal-append-to-body="false"
      :visible.sync="isDownload"
      title="下载"
      width="30%"
      :before-close="downLoadClose"
    >
      <CheckDownLoad :info="currentRowInfo" />
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Transfer from "../../components/postLoanManagement/transfer";
import CheckDownLoad from "../../components/postLoanManagement/checkDownLoad";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  getPermType,
  getSummary,
  getPageByCriteria
} from "../../../src/assets/js/api";
import { checkPermiss, expotOut, GMTToStr } from "../../assets/js/utlis";
import Mixin from "../../views/mixin/routeMixin";

export default {
  name: "postCreditList",
  components: {
    Transfer,
    CheckDownLoad
  },
  mixins: [Mixin],

  data() {
    return {
      productType: [], //产品类型!
      total: null,
      query: {
        pageNum: 1,
        pageSize: 10,
        productType: "",
        belong: "",
        loanOfficer: "",
        area: "",
        countdownDay: "",//倒计时
        min: "",
        max: "",
        basicBorrowerName: "",
        collectionStatus: "",
        failedPeriod: "",
        unfollowedDay: "",
        repayException: ""

      },
      countdownList: [],
      tableData: [],
      ids: [],
      xjInfo: "",//小结信息
      collectionTime: [],
      failedPeriodTime: [],
      unfollowedDayTime: [],
      golbalPermissions: [],
      isTransfer: false,
      currentPage: 1,
      isDownload: false,//控制下载合同
      currentRowInfo:{},//当前行信息
    };

  },

  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getProduct();
    this.getcountdownList();
    this.getSummary();
    this.getCollection();
    this.getFailedPeriod();
    this.getUnfollowedDay();
    this.getList();
  },
  computed: {
    //控制客户转移
    showCustomerTransfer() {
      return checkPermiss("/business:compensatory:change", this.golbalPermissions);
    }

  },
  methods: {
    //关闭合同下载弹窗
    downLoadClose(){
      this.isDownload=false;
    },
    //下载合同
    downloadContract(row) {
      this.isDownload=true;
      this.currentRowInfo=row;
    },
    //查看
    goView(row) {
      this.$router.push(`/postLoanManagement/postCreditDetails?orderNumber=${row.orderNumber}`);
    },
    //批量转移
    batchTransfer() {
      if (this.ids.length > 0) {
        this.isTransfer = true;
      } else {
        this.$message.error("请选择需要转移的订单");
      }
    },

    //显示异常状态
    tableRowClassName({ row }) {
      if (row.repayException === 0) {
        return "warning-row";
      }
      return "";
    },
    //获取列表
    getList() {
      getPageByCriteria(this.query).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      });
    },
    //贷后小结
    getSummary() {
      getSummary().then(res => {
        this.xjInfo = res.data;
      });
    },
    //未跟进时间
    getUnfollowedDay() {
      getPermType("no_follow_up").then(res => {
        this.unfollowedDayTime = res.data;
      });
    },
    //保理扣款失败
    getFailedPeriod() {
      getPermType("overdue_failed").then(res => {
        this.failedPeriodTime = res.data;
      });
    },
    //获取催收状态
    getCollection() {
      getPermType("collection_status").then(res => {
        this.collectionTime = res.data;
      });
    },
    //获取倒计时天数筛选
    getcountdownList() {
      getPermType("countdown_day").then(res => {
        this.countdownList = res.data;
      });
    },
    // 查询产品
    getProduct() {
      getPermType("order_product").then(res => {
        this.productType = res.data;
      });
    },

    handleClose(done) {
      this.$refs.Transfer.closeFun(true);
      this.dialogCloes();
      done();
    },
    dialogCloes() {
      this.isTransfer = false;
      this.$refs.multipleTable.clearSelection();
    },

    //导出订单
    orderExport() {

      expotOut(
        "get",
        "/business/compensatory/exportByCriteria",
        this.query, // 导出请求参数
        "贷后列表" // 导出文件名字
      );
    },


    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
      //清空多选
      this.$refs["multipleTable"].clearSelection();
    },
    // 清空按钮
    emptyFun() {

      this.$refs["query"].resetFields();
      this.query.min = "";
      this.query.max = "";
      this.currentPage = 1;
    },


    beforeClose() {
      this.suspend.operationCause = null;
    },
    districtBeforeClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.$refs.DistrictRef.DistrictFormFun();
        })
        .catch(() => {
        });
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();

    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    // 批量
    getRowKey(row) {
      return row.orderNumber;
    },
    changeFun(row) {
      this.ids = row.map((item) => item.orderNumber);
    }

  },
  watch: {
    total: {
      handler() {
        if (
          this.total == (this.pageNo - 1) * this.pagesize &&
          this.total != 0
        ) {
          this.pageNo -= 1;
          this.queryData.pageNo = this.pageNo;
          //录入日期
          if (this.queryData.grantTime && this.queryData.grantTime[0]) {
            this.queryData.inputMin = GMTToStr(this.queryData.grantTime[0]);
            this.queryData.inputMax = GMTToStr(this.queryData.grantTime[1]);
          }
          delete this.queryData.grantTime;
          this.valueQuery(this.queryData);
          this.getOrderListBy(this.valQuerry); //获取列表数据
        }
      }
    },
    $route: function(to, from) {
      if (to.path != from.path) {
        // this.queryData.prductId = sessionStorage.getItem("prductId");
        // this.queryData.pageNo = 1;
        // this.valueQuery(this.queryData);
        // this.getOrderListBy(this.queryData);
        this.emptyFun();
        this.valQuerryBy.prductId = sessionStorage.getItem("prductId");
        this.query.prductId = sessionStorage.getItem("prductId");
        this.getProduct();
        this.getOrderNumBy();
        this.currentPage = 1;
      }
    }
  }
};
</script>

<style scoped type="less">
.query .el-form-item {
  position: relative;
  box-sizing: border-box;
  width: 320px;
  padding-left: 110px;
}

.query ::v-deep .el-form-item__label {
  line-height: 32px;
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  height: 32px;
  text-align: right;
}

.query ::v-deep .vue-treeselect {
  height: 32px;
}

.query ::v-deep.el-input__icon,
.query ::v-deep.el-range-separator {
  line-height: 24px;
}

.treeSel ::v-deep .vue-treeselect__control {
  line-height: 30px;
  overflow: hidden;
  height: 32px;
}

::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

::v-deep .el-button--text {
  /* width: 40px; */
}

::v-deep .el-form--inline .el-form-item__content {
  line-height: 32px;
  width: 100%;
}

::v-deep .btn .el-form-item__content {
  width: 100%;
}

.query ::v-deep .el-input__inner {
  line-height: 32px;
  height: 32px;
}

::v-deep .el-input__icon {
  line-height: 32px;
}

.query .el-select {
  width: 100%;
}

::v-deep .button .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.main {
  position: relative;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  top: 20px;
  left: 0;
  color: rgba(51, 51, 51, 1);
}

.btn .el-button {
  float: left;
}

.wrap_te {
  padding: 15px 10px 0 0;
}

.wrap_te .el-form-item {
  margin-bottom: 10px;
}

.el-form-item.button {
  width: 100%;
  text-align: right;
}

/deep/ .button .el-form-item__content {
  display: flex;
  justify-content: flex-end;
}

.el-table ::v-deep.tips .cell {
  overflow: visible;
}

.el-table ::v-deep.tips sup {
  top: -4px;
  right: 11px;
}

.tips-box {
  width: 100%;
  height: 40px;
  background: #EFF7FF;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
}

.tips-box span {
  color: #3B9DF8;
  font-weight: bold;
}

.section_wrap {
  margin-top: 0;
}

/deep/ .el-form--inline .el-form-item__content {
  display: flex;
  align-items: center;
}

/deep/ .section-select .el-input__inner {
  width: 90px;
}

.lianjie {
  display: inline-block;
  margin: 0 8px;
}

.tips-text {
  font-size: 14px;
  font-weight: 400;
  color: #FB575E;
  display: inline-block;
  margin-right: 30px;
}

/deep/ .el-table .warning-row {
  background: rgba(251, 87, 94, 0.1);
  color: #FB575E;
}

/deep/ .el-dialog__header {
  font-weight: bold;
  text-align: left;
}


</style>
